<template>
  <div v-if="src" class="avatar" :style="{width, 'background-image':'url('+src+')'}">
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [String],
      default: '100%'
    },
    src: {
      type: String,
      default: 'https://ark-1256750454.cos.ap-shanghai.myqcloud.com/avatar.png'
    }
  }
}
</script>

<style scoped lang="less">
.avatar {
  padding-bottom: 100%;
  border-radius: 50%;
  background-position: center center;
  background-repeat: none;
  background-size: cover;
}
</style>
